[Zendesk]サポートのナレッジ活用を爆速にするChrome拡張を作った話 – Zendesk入門 Advent Calendar 2021 Day22 #zendesk

サポートで利用する効率的なナレッジ活用するための、Chrome 拡張を作ったのでご紹介です。

Zendesk入門アドベントカレンダー2021

#Zendesk

千葉淳

2021.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コンニチハ、千葉です。

このエントリは、クラスメソッドZendesk入門 Advent Calendar 2021の22日目です。

Google で検索すると、Google検索結果に加えて Zendesk ナレッジ、過去チケットの検索結果を1つの画面で表示する、Chrome 拡張を作りました。ツールの利用イメージです。

Google 検索ボックスで入力した文字列を Zendesk でも検索し、右窓に検索結果を表示します。これを利用することで、Googleと社内ナレッジを同時に利用できます。

作った背景

サポートに関するナレッジ管理、悩みありませんか？ Confluence 使ったり、Notion 使ったり、Zendesk のヘルプセンター使ったり、いろいろな選択肢があると思います。我々のチームでは社内ナレッジは Confluence、Zendeskヘルプセンター、過去チケット、と情報がバラバラに保存されており、うまく活用できていませんでした。

情報をうまく活用したい！という思いから、この検索ツールを作りました。

Googleにある莫大なナレッジ
顧客へ提供している FAQ などのナレッジ
社内に閉じたナレッジ
過去チケットのナレッジ

1回検索するだけで、様々なソースから検索できることを目指しました。

やったこと

Chrome 拡張開発

Chrome 拡張開発したのが初めてだったので、1から調べて作りました。

Chrome Extension の作り方シリーズがわかりやすくて、とても参考になりました。

また、コードは公開できないのですが、ポイントだけ紹介します。

認証認可

Zendesk ではAPI トークンを発行を利用し各 API を利用できます。初め API トークンを利用しようと思いましたが、60名程度で利用するため Chrome 拡張へのキー埋め込みは漏洩時にリスクになると思いました。

そのため、OAuth でトークンを取得するようにしました。参考にした記事です。この記事を読めばトークン取得まで可能です。

Authorization code grant flow と Implicit grant flow が利用できます。Authorization code grant flow ではリフレッシュトークンの利用ができないためトークンは永続化される仕様になっています。そのため、リフレッシュトークンをどうにかリセットする方法を無理やり作りました。方法としては、Zendesk に登録したアプリケーションを毎週削除して作り直すことでトークンをリフレッシュしています。

また、スコープの定義が可能です。今回は読み込みなので、read をスコープにしました。CSRF を防ぐために、state パラメータを追加しチェックしましょう。

検索用の Zendesk API

今回は、Zendeskにあるヘルプセンターの記事とチケットを検索します。使った API をご紹介します。

ヘルプセンター記事を検索

  const pathParams = `query=${encodeURI(queryString)}&multibrand=true`;
  const url = `https://${SUBDOMAIN}.zendesk.com/api/v2/help_center/articles/search.json?${pathParams}`;
  request.open("GET", url, true);
  request.setRequestHeader("Authorization", "Bearer " + access_token);
  request.send();

過去チケットを検索

  const pathParams = `include=highlights&page=1&per_page=30&type=ticket&query=status:closed ${encodeURI(
    queryString
  )}`;
  const url = `https://${SUBDOMAIN}.zendesk.com/api/v2/search/incremental.json?${pathParams}`;
  request.open("GET", url, true);
  request.setRequestHeader("Authorization", "Bearer " + access_token);
  request.send();

検索文字列の取得

開発したアプリは、Google の検索ボックスに入れた値を取得し、Zendeskの検索APIに指定します。Google 検索ボックスに入力した値は、こんな感じのコードで取得しました。検索するとURLに検索文字列が入るのでそこから取得します。

function readUrlParam(url, param) {
  param += "=";
  if (url.indexOf(param) !== -1) {
    const start = url.indexOf(param) + param.length;
    let value = url.substr(start);
    if (value.indexOf("&") !== -1) {
      const end = value.indexOf("&");
      value = value.substring(0, end);
    }
    return value;
  } else {
    return false;
  }
}

let queryString = new URLSearchParams(window.location.search);
queryString = queryString.get("q");

Chrome 拡張の社内共有

Chrome 拡張を社内共有する場合、5パターンあります。

Chrome ウェブストア(一般公開)：パブリックに公開されるもの
Chrome ウェブストア(限定公開)： URL知ってるユーザーが利用可能
Chrome ウェブストア(非公開): 非公開なんですが特定の Goole ユーザーやグループに公開できます。URL知ってても許可されてないユーザーはインストールできません。
Zip： Zip で配って都度インストールしてもらう方法です
Google Workspace Enterprise オプション: ドメイン指定した公開

4でもいいかなと思ったんですが、メンバーが60名程度いるのと、アップデート頻繁にしそうだったので3で実施しました。設定方法はブログ書いたのでリンク先ご覧ください。

参考：開発した Chrome 拡張を社内ユーザーのみ限定公開してみた